/**
 * Created by Administrator on 2017/1/15.
 */
//检测屏幕宽度变化,调整logo大小,隐藏目录，显示侧滑目录

$(document).ready(function() {
    var width=$(window).width();

    if(width<960){
        //字体变小
        $(".title_body h2").css("font-size","28px");
        $(".block2").css("height","550px");
        $(".title_body .title1").css("margin-top","50px");
    }
    if(width<=480){
        $(".pic_intro ul li").css("width","98%");
        $(".title_body").css("margin-top","50px");
        $(".block2").css("height","965px");
    }
    if(width>480&&width<1200){
        $(".title_body").css("margin-top","60px");
        $(".pic_intro ul li").css("width","48%");

    }

    if(width>960&&width<1200){
        $(".block2").css("height","670px");
    }

    if(width<1200){
        $(".X_back").css("display","none");
        $(".r_top").css("background-color","gray");
        $(".X").css("display","none");//关闭按钮
        $(".right_help").css("display","none");//右侧面板
        $(".pop-box1").css("display","block");//显示模态
        $(".pop-box2").css("display","block");//显示模态
        $("#slide_menu").css("display","block");
        $(".logo a img").css("width", "233px");
        $(".menu").css("display", "none");
        $("#mobile_btn").css("display", "block");

        $(".pic_intro").css("width","100%");
        $(".title_body").css("margin-top","50px");
        $(".pic_intro ul li").css("margin","5px 1% 5px 1%");
        $(".title_body").css("margin-bottom","15px");
    }

    if(width<768){
        $(".logo").css("width","495px");
        $("#ad_slide .ad li h1").css("font-size","30px");
        $("#ad_slide .ad li h3").css("font-size","12px");
        $("#ad_slide .ad li").css("margin-top","170px");
        $("#ad_slide .ad").css("height","470px");
        $(".block1").css("height","504px");

        //
    }else if(width>=768&&width<=1200){

        $(".block1").css("height","600px");
        $("#ad_slide .ad").css("height","470px");
        $(".logo").css("width","20%");
        $("#ad_slide .ad li h1").css("font-size","65px");
        $("#ad_slide .ad li h3").css("font-size","15px");
        $("#ad_slide .ad li a").css("font-size","20px");
        $("#ad_slide .ad li").css("margin-top","170px");

        //$("#ad_slide .ad").css("height","100px");
        //
    }else if (width> 1200){
        /*$("#ad_slide .ad").css("padding-top","290px");
        $(".X_back").css("display","block");
        $(".r_top").css("background-color","transparent");
        $(".pop-box1").css("display","none");//隐藏模态
        $(".pop-box2").css("display","none");//隐藏模态
        $("#slide_menu").css("display","none");
        $(".logo a img").css("width", "90%");
        $(".menu").css("display", "block");
        $("#mobile_btn").css("display", "none");
        $(".X").css("display","block");//打开 关闭按钮
        $(".right_help").css("display","block");//打开右侧面板*/
    }

    $(window).resize(function () {
            var width = $(window).width();
            if(width<=1200){
                $(".X_back").css("display","none");
                $(".r_top").css("background-color","gray");
                $(".X").css("display","none");//关闭按钮
                $(".right_help").css("display","none");//右侧面板
                $(".pop-box1").css("display","block");//显示模态
                $(".pop-box2").css("display","block");//显示模态
                $("#slide_menu").css("display","block");
                $(".logo a img").css("width", "233px");
                $(".logo").css("width", "233px");
                $(".menu").css("display", "none");
                $("#mobile_btn").css("display", "block");

                //block2
                $(".pic_intro").css("width","100%");
                $(".title_body").css("margin-top","50px");
                $(".pic_intro ul li").css("margin","1%");
                $(".title_body").css("margin-bottom","15px");
            }
        if(width<960){
            //字体变小
            $(".title_body  h2").css("font-size","28px");
            $(".block2").css("height","550px");
            $(".title_body .title1").css("margin-top","50px");
        }
        if(width>=960){
            $(".title_body  h2").css("font-size","35px");
            $(".title_body .title1").css("margin-top","120px");
        }

        if(width<=480){
            $(".pic_intro ul li").css("width","98%");
            $(".title_body").css("margin-top","50px");
            $(".block2").css("height","965px");
        }
        if(width>480&&width<1200){
            $(".title_body").css("margin-top","60px");
            $(".pic_intro ul li").css("width","48%");
        }
        if(width>960&&width<1200){
            $(".block2").css("height","652px");
        }
        if(width<768){
            $(".logo").css("width","495px");
            $("#ad_slide .ad li h1").css("font-size","30px");
            $("#ad_slide .ad li h3").css("font-size","12px");
            //$("#ad_slide .ad li a").css("font-size","9px");
            //$("#ad_slide .ad li").css("margin-top","170px");
            $("#ad_slide .ad").css("height","470px");
            $("#ad_slide .ad li").css("margin-top","170px");
            $(".block1").css("height","504px");
            //
        }else if(width>=768&&width<=1200){

            $(".block1").css("height","600px");
            $("#ad_slide .ad").css("height","470px");
            $(".logo").css("width","20%");
            $("#ad_slide .ad li h1").css("font-size","65px");
            $("#ad_slide .ad li h3").css("font-size","15px");
            $("#ad_slide .ad li a").css("font-size","20px");

            $("#ad_slide .ad li").css("margin-top","170px");
            //$("#ad_slide .ad").css("height","100px");
            //
        }else if (width > 1200) {

            $(".block1").css("height","888px");
            $("#ad_slide .ad li h1").css("font-size","65px");
            $("#ad_slide .ad li h3").css("font-size","15px");
            $("#ad_slide .ad li a").css("font-size","20px");
            $("#ad_slide .ad li").css("margin-top","290px");
            $("#ad_slide .ad").css("height","590px");
            //$("#ad_slide .ad").css("margin-top","290px");

            $(".X_back").css("display","block");
            $(".r_top").css("background-color","transparent");
            $(".pop-box1").css("display","none");//隐藏模态
            $(".pop-box2").css("display","none");//隐藏模态
            $("#slide_menu").css("display","none");
            $(".logo").css("width","20%");
            $(".logo a img").css("width", "90%");
            //$(".logo a img").animate({width:"90%"},500);
            $(".menu").css("display", "block");
            $("#mobile_btn").css("display", "none");
            $(".X").css("display","block");//打开 关闭按钮
            $(".right_help").css("display","block");//打开右侧面板

            //block2
            $(".pic_intro").css("width","1210px");
            $(".title_body").css("margin-top","15px");
            $(".title_body").css("margin-bottom","50px");
            $(".pic_intro ul li").css("margin","5px");
            $(".pic_intro ul li").css("width","393px");
            $(".block2").css("height","505px");
            } else{

            }
        }
    );

    $(".title_body .title2").animate({opacity:1,top:0},1000);
    $(".pic_intro .bg1").animate({opacity:1,top:0},1000);
    $(".pic_intro .bg2").hide();
    $(".pic_intro .bg2").show( "fold", 1000 );
    $(".pic_intro .bg3").animate({opacity:1,right:0},1000);
    $(".pic_intro .bg4").animate({opacity:1,top:0},1000);
    $(".pic_intro .bg5").hide();
    $(".pic_intro .bg5").show( "fold", 1000 );
    $(".pic_intro .bg6").animate({opacity:1,right:0},1000);

    $(".title_body .title1").animate({opacity:1,top:0},1000);
    $(".platform li").animate({opacity:1,left:0},1000,"easeOutElastic");
    $(".li_2").hide();
    $(".li_5").hide();

    $(".li_2").show("bounce",1000,"easeOutElastic");
    $(".li_5").show("bounce",1000,"easeOutElastic");

    $(".title_body .title3").animate({opacity:1,top:0},1000);
    //图片轮播
    var index=0;//确定小圆的位置初始化为第一个
    $("#ad_slide .ad_point li:eq(0)").css("background-color","lightblue");//初始化选择小圆
    var slide_X=0;//设置初始位置和ul的标签left值相关
    var gain=100;//每一次移动的百分比
    var dur=1000;//切换动画的过度时间 ms
    var inter=5000;  //切换的间隔 ms
    var page_x=0;//鼠标的位置
    var pre_x=0;//鼠标点击的位置
    var flag=0;//用来确定是否松开鼠标
    var ad_x=0;//当前窗口的位置
    var mouse_move_x;//确定鼠标拖动的距离

    slidepic=function () {
        //判断是否到两头
        if(slide_X==0 || slide_X==-200){
            gain=-gain;
        }
            slide_X+=gain;
            $("#ad_slide .ad_point li:eq("+index+")").css("background-color","transparent");//先把前一个给选择消除
            index+=-gain/100;
            $("#ad_slide .ad_point li:eq("+index+")").css("background-color","lightblue");//选择新的小圆
            $("#ad_slide .ad").animate({left:slide_X+"%"},dur);//过渡动画

        console.log(parseFloat($("#ad_slide .ad").css("left")));
        console.log(inter);
        console.log(slide_X);
        console.log(index);
        console.log(dur);
        console.log("----");
    };



    //广告自动切换
    var t=setInterval(slidepic,inter);
    $("#ad_slide .ad_point li").hover(
        function () {
            $(this).css("background-color","lightblue");
        },function () {
            // 如果当前的选择不是对应的广告则消除背景
            if(index!=$(this).index()){
                $(this).css("background-color","transparent");
            }
        });

    $("#ad_slide .ad").mousemove(function (e) {
        page_x=e.pageX;//标识当前鼠标的位置，为了确定初始位置使用
        var move_x=0;//需要移动的距离，鼠标拖动的距离
        if(pre_x>e.pageX){
            move_x=e.pageX-pre_x;
        }else{
            move_x=e.pageX-pre_x;
        }
        mouse_move_x=move_x;//把移动的距离给传出去，为确定是否需要移动位置
        move_x=ad_x+move_x;//确定窗口需要拖动位置
        if(flag==1){
           $("#ad_slide .ad").css("left",move_x+"px");
        }
        //console.log(flag);
    });
    console.log($("#ad_slide .ad").width());
    function mouse_down() {
        clearInterval(t);//执行拖动事件，先暂停切换

        ad_x= parseFloat($("#ad_slide .ad").css("left"));//保存当前窗口的位置，为确定待会拖动的时候移动的距离
        pre_x=page_x;//获得当前点击的位置
        flag=1;//点击状态改变
        console.log(ad_x);
    }
    $("#ad_slide .ad").mousedown(mouse_down);

    function mouse_up() {
        var move_flag=false;//用来确定往左还是往右
        var mouse_x=mouse_move_x;//保存按下鼠标时拖动的距离
        var window_x=parseFloat($("#ad_slide .ad").css("left"));//当前窗口的x坐标
        flag=0;//将按下的标志变为松开
        //console.log(flag);
        $("#ad_slide .ad").off("mousedown");//先卸载掉鼠标按下事件，让滑动动画执行完毕再给绑定按下事件
        //执行动画

        //先判断当前窗口的位置是否超过两头最大距离
        var max_width=($("#ad_slide .ad").width()*2)/3
        if(window_x>0||window_x<-max_width){
            //超过两端的位置，移回两端
            $("#ad_slide .ad").animate({left:slide_X+"%"},dur,function () {
                clearInterval(t);//先暂停当前的动作
                t=setInterval(slidepic,inter);
                $("#ad_slide .ad").mousedown(mouse_down);
            });//过渡动画，
        }else {
            //如果不是两端
            //判断拖动的距离是否足够大 (80)，正数还是负数正数往右，负数往左,
            if(mouse_x<0){
                //先转换成正数
                mouse_x=-mouse_move_x;
            }else{
                move_flag=true;
            }
            //判断拖动距离是否足够达到移动的条件
            if(mouse_x>80){
                //达到，则移往下一个
                if(move_flag){
                    //拖动的正距离往右边
                    gain=100;
                }else{
                    //拖动的负距离往左边
                    gain=-100;
                }
                slide_X+=gain;
                $("#ad_slide .ad_point li:eq("+index+")").css("background-color","transparent");//先把前一个给选择消除
                index+=-gain/100;
                $("#ad_slide .ad_point li:eq("+index+")").css("background-color","lightblue");//选择新的小圆
                $("#ad_slide .ad").animate({left:slide_X+"%"},dur,function () {
                    clearInterval(t);//先暂停当前的动作
                    t=setInterval(slidepic,inter);
                    $("#ad_slide .ad").mousedown(mouse_down);
                });//过渡动画，执行完在启动自动移动
            }else{
                //未达到移动的距离则返回原先的位置
                $("#ad_slide .ad").animate({left:ad_x+"px"},dur,function () {
                    clearInterval(t);//先暂停当前的动作
                    t=setInterval(slidepic,inter);
                    $("#ad_slide .ad").mousedown(mouse_down);
                });//过渡动画，移回之前的位置，执行完在启动自动移动
            }
        }

    }

    $("#ad_slide .ad").mouseup(mouse_up);

    /*$("#ad_slide .ad").on("swipeleft",function () {

    });*/
    function click_x() {//切换点
        clearInterval(t);//先暂停当前的动作
        $("#ad_slide .ad_point li").off("click");//先卸载事件，让动画执行完毕，再开启
        index=$(this).index();
        index=parseInt(index);//获得当前的li的位置
        slide_X=-index*100;//更新当前的位置
        if(index==0){
            gain=100;
        }else if(index==2){
            gain=-100;
        }
        $("#ad_slide .ad_point li").css("background-color","transparent");
        $(this).css("background-color","lightblue");
        //获得当前的index 处理成百分比

        $("#ad_slide .ad").animate({left:slide_X+"%"},dur,function () {
            t=setInterval(slidepic,inter);//执行完毕重新开始
            $("#ad_slide .ad_point li").click(click_x);
        });//过渡动画

    }
    //点击切换小圆时
    $("#ad_slide .ad_point li").click(click_x);
    //返回顶部 620 652 613
    $(".r_top").hover(function () {
        $(".r_top").css("background-Color","white");
    },function () {
        if($(window).width()<1200){
            $(".r_top").css("background-color","gray");
        }
        $(".r_top").css("background-color","transparent");
    });

    //滚动条
        $(window).scroll(function () {

            if (jQuery(this).scrollTop() < 100) {
                $(".header").animate({
                    backgroundColor:"rgba(36,125,255,0.5)",
                },1000);
                $(".r_top").css("bottom", "-100px");

            } else {
                $(".header").animate({
                    backgroundColor:"rgba(36,125,255,1)",
                },1000);
                $(".r_top").css("z-index", 4);
                $(".r_top").css("bottom", "60px");

            }
        });




        /*
        if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
            //底部
        }
        */

    //先隐藏模态
    //$(".pop-box1").animate({height:0},0);//收入中间
    //$(".pop-box2").animate({height:0},0);//收入中间
    //模态点击隐藏
    $(".pop-box1").click(function () {
        $("#mobile_btn").click();
    });

    $(".pop-box2").click(function () {
        $("#mobile_btn").click();
    });

    //关闭右侧
    $(".X").click(function () {
        if($(".X").css('width')=="40px")
        {
            $(".X").animate({width: 0});//滑入右侧
            $(".X_back").animate({width: 40});
            $(".right_help").animate({width:0});
            $(".r_top").animate({width:0});
        }
    });

    $(".X_back").click(function () {
       if($(".X_back").css('width')=="40px")
        {
            $(".X").animate({width: 40});//滑入右侧
            $(".X_back").animate({width: 0});
            $(".right_help").animate({width:40});
            $(".r_top").animate({width:40});
        }
    })
    /*右侧滑动块*/

    $("#mobile_btn").click(function() {
        if ($("#slide_menu").css('width') == '200px') {

            $(".pop-box2").animate({height:0});//收入中间
            $(".pop-box1").animate({height:0});//收入中间
            //隐藏模态
            $("#slide_menu").animate({width: 0});//滑入右侧
            //还原
            $("#mobile_btn .li1").css("border-top","4px solid white");
            $("#mobile_btn .li2").css("border-top","0px");
            $("#mobile_btn .li2").css("border-bottom","4px solid white");
            $("#mobile_btn .li2").css("bottom","0px");

            $("#mobile_btn .li1").rotate({
                duration:500,
                angle: -45,
                animateTo:0});
            $("#mobile_btn .li2").rotate({
                duration:500,
                angle: 45,
                animateTo:0});
        } else {
            $(".pop-box2").animate({height:0.5*$(window).height()});//收入中间
            $(".pop-box1").animate({height:0.5*$(window).height()});//收入中间
            $("#slide_menu").animate({width: 200});//滑出
            //变形
            $("#mobile_btn .li1").css("border-top","4px solid transparent");
            $("#mobile_btn .li2").css("border-bottom","4px solid transparent");
            $("#mobile_btn .li2").css("border-top","4px solid white");
            $("#mobile_btn .li2").css("border-top","4px solid white");
            $("#mobile_btn .li2").css("bottom","7px");

            $("#mobile_btn .li1").rotate({
                duration:500,
                angle: 0,
                animateTo:-45});

            $("#mobile_btn .li2").rotate({
                duration:500,
                angle: 0,
                animateTo:45});
        }
    });

    //







});
